/*
1.点击 +  触发tap点击事件
  1.1 调用小程序内置的 选择图片的 api
  1.2 获取到 图片的路径 数组
  1.3 把图片路径 存到 data的变量中
  1.4 页面就可以根据 数组图片 进行循环显示 自定义组件

2.点击自定义图片组件
  2.1 获取被点击的元素的索引
  2.2 获取 data 中的图片的数组
  2.3 根据索引 数组中删除对应的元素
  2.4 把数组重新设置回data 中

  3.点击提交按钮
    3.1 获取文本域的内容 类似输入框的获取
      3.1.1 data 中定义变量 表示输入框内容
      3.1.2 文本域 绑定 输入事件 事件触发的时候 把输入的值 存入变量中
    3.2 对这些内容 合法性验证
    3.3 验证通过 用户选择的图片 上传到专门的图片的服务器 返回图片外网的链接
      3.3.1 遍历图片数组
      3.3.2 一个个上传
      3.3.3 自己再来维护一个图片数组 存放上传后图片外网的链接
    3.4 文本域 和 外网的图片路径 一起提交到服务器   （前端模拟一下）
    3.5 清空当前页面
    3.6 返回上一页
*/

Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs: [
      {
        id: 0,
        value: "体验问题",
        isActive: true,
      },
      {
        id: 1,
        value: "销量",
        isActive: false,
      },
    ],
    // 被选中的图片路径数组
    chooseImgs: [],
    // 文本域的内容
    textVal: "",
  },
  // 外网的图片路径数组
  UpLoadImgs: [],

  //  标题点击事件 从子组件传递出来
  handleTabsItemChange(e) {
    // console.log(e);
    // 1. 获取被点击的标题索引
    const { index } = e.detail;
    // 2. 修改源数组
    let { tabs } = this.data;
    tabs.forEach((v, i) =>
      i === index ? (v.isActive = true) : (v.isActive = false)
    );
    //3. 赋值到 data中
    this.setData({
      tabs,
    });
  },

  // 点击加号 选择图片事件
  handleChooseImg() {
    // 调用小程序内置的选择图片api
    wx.chooseImage({
      // 同时选中的图片的数量
      count: 9,
      // 选中图片的格式， 第一个为原图，第二个为压缩
      sizeType: ["original", "compressed"],
      // 图片的来源  ，相册 或者 照相机
      sourceType: ["album", "camera"],
      success: (result) => {
        // console.log(result);
        this.setData({
          // 图片数组 进行拼接
          chooseImgs: [...this.data.chooseImgs, ...result.tempFilePaths],
        });
        // console.log(123);
      },
    });
  },

  //1. 点击自定义图片组件
  handleRemoveImg(e) {
    //2. 获取自定义的 data-index 值
    const { index } = e.currentTarget.dataset;
    // console.log(index);
    // 3. 获取data 中的图片数组
    let { chooseImgs } = this.data;
    // 4.删除元素
    chooseImgs.splice(index, 1);
    this.setData({
      chooseImgs,
    });
  },

  //文本域的输入事件
  handleTextInput(e) {
    // console.log(e);

    this.setData({
      textVal: e.detail.value,
    });
  },

  // 提交按钮的点击事件
  handleFromSubmit() {
    // 1.获取文本域的内容  图片数组
    const { textVal, chooseImgs } = this.data;
    // 2.合法性的验证
    if (!textVal.trim()) {
      // 不合法
      wx.showToast({
        title: "输入不合法",
        icon: "none",
        mask: true,
      });
      return;
    }
    // 3.准备上传图片 到专门的图片服务器
    // 上传文件的 api 不支持多个文件同时上传  遍历数组 一个个上传

    // 显示正在等待图标
    wx.showLoading({
      title: "正在上传中",
      mask: true,
    });

    // 判断有没有需要上传的图片数组
    if (chooseImgs.length != 0) {
      chooseImgs.forEach((v, i) => {
        wx.uploadFile({
          // 上传的位置
          url: "https://images.ac.cn/Home/Index/UploadAction/",
          // 被上传文件路径
          filePath: v,
          // 上传文件的名称 后台来互殴去文件
          name: "file",
          // 顺带的文本信息
          formData: {},
          success: (result) => {
            // console.log(result);
            let url = JSON.parse(result.data).url;
            this.UpLoadImgs.push(url);
            // console.log(this.UpLoadImgs);

            // 所有的图片都上传完毕才触发
            if (i === chooseImgs.length - 1) {
              wx.hideLoading();

              console.log("把文本的内容和外网的图片数组提交到后台中");
              // 提交都成功了
              // 重置页面

              // 设置文本域内容和图片获取数组都为空
              this.setData({
                textVal: "",
                chooseImgs: [],
              });
              // 返回上一页面
              wx.navigateBack({
                delta: 1,
              });
            }
          },
        });
      });
    } else {
      wx.hideLoading();
        
      console.log("只是提交了文本");
      wx.navigateBack({
        delta: 1
      });
        
    }
  },
});
